<template>
    <div>
        <van-search v-model="keyword" show-action shape="round" background="white" placeholder="请输入搜索关键词"
            @search="onSearch">
            <template #left>
                <van-icon name="arrow-left" color="black" size="20" @click="back" />
            </template>
            <template #action>
                <div class="search-left" @click="onSearch">搜索</div>
            </template>
        </van-search>
    </div>
    <div v-show="flag">
        <div class="box">
            <p>热门搜索</p>
            <p>隐藏</p>
        </div>
        <ul>
            <li v-for="item in list" :key="item.wordid">
                <van-tag type="primary"><span @click="tag(item.keyword)">{{ item.keyword }}</span></van-tag>
            </li>
        </ul>
    </div>
    <van-list>
        <ul class="box5">
            <li v-for="item in list1" :key="item.proid" @click="de(item.proid)">
                <img :src="item.img1" style="width:150px">
                <p>{{ item.proname }}</p>
                <p>￥{{ item.originprice }}</p>
            </li>
        </ul>
    </van-list>
</template>

<script setup lang="ts">
import { hotSearch, search } from '@/service/search';
import { useRouter } from 'vue-router';
import { ref } from "vue"
let router = useRouter()
let list = ref([] as any)
let count = ref<number>(1)
let limitNum = ref<number>(10)
const flag = ref(true)
let keyword = ref<string>("")
let list1 = ref([] as any)
const back = () => {
    router.push("/home")
}
hotSearch().then((res) => {
    list.value = res.data
    console.log(list)
})
const onSearch = () => {
    search(count.value, limitNum.value, keyword.value).then((res: any) => {
        if (res.code === "200") {
            list1.value = list1.value.concat(res.data)
            flag.value = false
            console.log(list1)
        }
    })
}
const de = (id: any) => {
    router.push("/detail/" + id)
}
const tag = (value: any) => {
    keyword.value = value
    onSearch()
}
</script>

<style scoped>
.box {
    display: flex;
    justify-content: space-between;
}

.box p {
    font-size: 12px;
    color: black;
    margin-left: 12px;
    margin-right: 12px;
}

ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

li {
    width: 16%;
}

.box5 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box5 li {
    width: 47%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    margin-left: 10px;
}

.box5 li p {
    width: 150px;
}

.box5 li p:nth-of-type(2) {
    color: red;
}
</style>